<template>
  <el-row>
    <el-col :span="14">
      <el-select @change="changeOptions()" v-model="forms.city" clearable placeholder="请选择市">
        <el-option v-for="item in cityOption" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-col>
   <!-- <el-col :span="12" >
      <el-select v-model="forms.county" clearable placeholder="请选择县">
        <el-option v-for="item in origenOption" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-col>-->
  </el-row>
</template>

<script lang="ts" setup>
import {ref, reactive, defineEmits, defineProps, computed, watch, toRefs} from "vue"
import {getCityName} from "@/api/business/business.js"
const props = defineProps({
  form: {
    type: Object,
    required: true,
    default: () => {},
  },
  cityShow: {
    type: Boolean,
    required: true,
    default: true,
  },
  countyShow: {
    type: Boolean,
    required: true,
    default: true,
  },
})
let emit = defineEmits(["update:form"])
let cityOption = ref(null)
let origenOption = ref(null)
let forms = ref(null)
watch(() => props.form, val => {
  forms.value=val
  if (val.city == "") {
    val.county = ""
    origenOption.value=[]
  } else {
    countys(val.city)
  }
  emit("update:form", val)
},{immediate:true,deep:true})
async function citys() {
  let {data: cityOptionOld} = await getCityName({parent: 370000})
  cityOption.value = cityOptionOld
}
async function countys(e: any) {
  let {data: origenOptionOld} = await getCityName({parent: e})
  origenOption.value = origenOptionOld
}
citys()
if (forms.city !== "") {
  console.log(forms)

  countys(forms.city)
}
function changeOptions() {
  forms.value.county = ""
}
</script>
<style lang="scss" scoped></style>
